<template>
  <div class="content vscroll">
    <div style="display: inline-block; width: 100%">
      <el-row>
        <el-col :span="20">
          <h3>白模清单</h3>
        </el-col>
        <el-col :span="4">
          <el-button size="small" type="primary" @click="openEditPage('add')"
            >添加</el-button
          >
        </el-col>
      </el-row>
    </div>
    <div class="vscroll" style="overflow-y: auto; height: 290px">
      <div id="listData">
        <el-table :data="citybaseAlbugeaList">
          <template v-for="(item, index) in columns">
            <el-table-column
              :label="item.title"
              :prop="item.dataIndex"
              :key="index"
            >
            </el-table-column>
          </template>
          <el-table-column fixed="right" label="操作" width="120">
            <template slot-scope="scope">
              <a class="edit-item" @click="openEditPage('modity', scope.row)"
                >编辑</a
              >
              <el-popconfirm
                title="是否要删除这个白模服务？"
                @confirm="deleteCertain(scope.row.id)"
                @cancel="deleteCancel"
                confirm-button-text="删除"
                cancel-button-text="取消"
              >
                <a class="edit-item" slot="reference">删除</a>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div>
      <config-info
        ref="serviceConfigInfo"
        :dynamicTitle="popupTitle"
        @addData="addData"
        @editData="editData"
        
      ></config-info>
    </div>
  </div>
</template>

<script>

import configInfo from "./configInfo";
const columns = [
    {
    title: "图层 ID",
    dataIndex: "id",
    key: "id",
    ellipsis: true,
    align: "center",
    // width: 80,
  },
  {
    title: "名称",
    dataIndex: "name",
    key: "name",
    width: 120,
    ellipsis: true,
    align: "left",
  },
  {
    title: "高度字段",
    dataIndex: "height_field",
    key: "height_field",
    width: 90,
    align: "center",
    ellipsis: true,
  },
//   {
//     title: "修改",
//     dataIndex: "edit",
//     key: "edit",
//     width: 60,
//     scopedSlots: { customRender: "action" },
//   },
];
export default {
  components: {
    "config-info": configInfo,
  },
  data() {
    return {
      citybaseAlbugeaList: [],
      columns,
      popupTitle: "",
      recordForm: null,
      pagination: {
        defaultPageSize: 5,
      },
    };
  },
  mounted() {
      this.getData();
  },
  computed: {},
  watch: {},
  methods: {
    //获取城市白模的字段扩展信息
    async getData() {
      this.citybaseAlbugeaList = [];
      agcim.widgets.widgetExtendField.getWidgetInfoByCode("agcim-cityBaseAlbuginea").then((res) => {
        let content = JSON.parse(res.content.widgetLevelsData);
        if (content instanceof Array && content.length > 0) {
          for (let i = 0; i < content.length; i++) {
            const element = content[i];
            let heightVal;
            if (element.height_field) {
              heightVal = element.height_field;
            }
            this.citybaseAlbugeaList.push({
              id: element.id,
              name: element.name,
              height_field: heightVal,
              base_layer_id: element.base_layer_id,
              base_layer_url: element.base_layer_url,
              base_layer_table: element.base_layer_table,
              single_fill_style: element.single_fill_style,
              style_class:element.style_class
            });
          }
        }
      });
    },
    //打开编辑页面
    openEditPage(value, record) {
      let childPopup = this.$refs.serviceConfigInfo;
      if (value.indexOf("add") > -1) {
        childPopup.resetForm();
        this.popupTitle = "添加白模服务";
      } else {
        this.popupTitle = "修改白模服务";
        childPopup.setCurrentForm(record);
      }
      childPopup.visible = true;
    },
    handleButtonClick(e) {},
    //根据扩展字段信息的行id删除整行的信息
    deleteCertain(id) {
      // agcim.widgets.widgetExtendField.deleteWidgtInfoByRowDataId(id,"agcim-cityBaseAlbuginea").then((res) => {
      agcim.widgets.widgetExtendField.deleteWidgtTableDataByRowDataId(id,"agcim-cityBaseAlbuginea").then((res) => {
        if (res.success) {
          this.$message.success("删除成功");
          ;
          this.getData();
        } else {
          this.$message.success("删除失败");
        }
      });
    },
    //扩展字段信息添加一行数据
    addData(rowData) {
      // agcim.widgets.widgetExtendField.addWidgtInfoData(rowData,"agcim-cityBaseAlbuginea").then((res) => {
      agcim.widgets.widgetExtendField.addWidgtTableData(rowData,"agcim-cityBaseAlbuginea").then((res) => {
        if (res.success) {
          this.$refs.serviceConfigInfo.visible = false;
          this.$message.success("保存成功");
          this.getData();
        } else {
          this.$message.error("保存失败");
        }
      });
    },
    //编辑字段扩展信息的一行数据
    editData(rowData) {
      // agcim.widgets.widgetExtendField.saveOrUpdataWidgtTableData(rowData,"agcim-cityBaseAlbuginea").then((res) => {
      agcim.widgets.widgetExtendField.updataWidgtTableData(rowData,"agcim-cityBaseAlbuginea").then((res) => {
        if (res.success) {
          this.$refs.serviceConfigInfo.visible = false;
          this.$message.success("修改成功");
          this.getData();
        } else {
          this.$message.error("修改失败");
        }
      });
    },

    deleteCancel(){

    }
  },
};
</script>
<style scoped>
::v-deep .ant-table-row td {
  padding-top: 8px;
  padding-bottom: 10px;
}
.content-bottom {
  /* height: 240px; */
}
.el-table .edit-item{
  padding-right:  10px;
}
/* el-table表格hover 修改背景色 */
.el-table,
.el-table__expanded-cell {
  background: rgba(255, 255, 255, 0);
}
.el-table::v-deep th,
.el-table::v-deep tr {
  background: rgba(255, 255, 255, 0);
}
.el-table::v-deep thead {
  color: rgba(255, 255, 255, 0.8);
}
.el-table::v-deep {
  color: rgb(255, 255, 255);
}

.el-table::v-deep .el-table__body tr:hover > td {
  background-color: rgba(255, 255, 255, 0.3) !important;
}

.el-table::v-deep .el-table__body tr.current-row > td {
  background-color: rgba(255, 255, 255, 0.3) !important;
}
.el-table::v-deep .el-table__body tr.hover-row.current-row > td,
.el-table::v-deep .el-table__body tr.hover-row--striped.current-row > td,
.el-table::v-deep .el-table__body tr.hover-row--striped > td,
.el-table::v-deep .el-table__body tr.hover-row > td {
  background: rgba(255, 255, 255, 0.3) !important;
}
</style>
